<template>
  <div id="dictFolder">
    <Breadcrumb content="字典维护" />
    <div class="bodyContent">
      <DictChildList ref="dictChildRef" />
    </div>
  </div>
</template>

<script setup lang="ts">
// 引入组件区==========
import { ref, reactive, getCurrentInstance, nextTick, onMounted, computed, watch } from 'vue';
import Breadcrumb from '@/components/Breadcrumb.vue';
import { Splitpanes, Pane } from 'splitpanes';
let { proxy }: any = getCurrentInstance();
import { VXETable } from 'vxe-table';
import { VxeMessage, VxeNotifyType } from '@/utils/CommonMessage';
import { AppStore } from '../../stores/store';
import DictChildList from './DictChildList.vue'; //引入最右侧组件

// 全局变量定义区 ==========
let treeloading = ref(false); //最左侧树加载状态
let folderLoading = ref(false); //中间文件夹加载状态

// 最左侧的树
let defaultProps = {
  children: 'children',
  label: 'name'
};
// 中间关键字
let searchForm = {
  code: ''
};
let dictChildRef: any = ref(null); //点击中间文件夹把信息传递给最右侧子组件
// 方法定义区 =============

onMounted(() => {
  const query = proxy.$route.query as any;
  if (query.code) {
    searchForm.code = query.code ? query.code : query.code;
    dictRowSlt(searchForm);
  }

})


// 选中中间文件夹第一个  最右侧组件数据
function dictRowSlt(searchForm: any) {
  dictChildRef.value.initPage(searchForm); //给最右侧组件传值
}
//**判断为空*/
function IsEmpty(value: any) {
  if (value === undefined || value === '' || value === null) {
    return true;
  }
  if (JSON.stringify(value) === '{}') {
    return true;
  }
  return false;
}
</script>

<style lang="scss" scoped>
#dictFolder {
  height: 100%;
  .bodyContent {
    height: calc(100% - 60px);

    .Splitpanes {
      width: 100%;
      height: 100%;
    }
    // 附加按钮间距
    .button-blue {
      margin: 5px 0 5px 5px;
    }
    // 最左侧的树
    .treeScroll {
      height: calc(100% - 40px);
      :deep(.el-scrollbar__view) {
        height: 100%;
        background-color: $base-white;
        .sampleType {
          height: 100%;
          .tools-tree {
            min-width: 168px;
            padding: 0 5px 5px 5px;
            font-size: $font-size;
            border: none;
          }
        }
      }
    }

    // 中间文件夹的
    .middleBox {
      height: 100%;
      .cardBox {
        height: calc(100% - 40px);
        background-color: $base-white;
        .el-row {
          width: 100%;
          margin-left: 0 !important;
          margin-right: 0 !important;
          .elColClazz {
            padding-left: 10px !important;
            padding-right: 10px !important;
            margin-bottom: 10px;

            .el-card {
              :deep(.el-card__header) {
                padding: 10px;
              }
              :deep(.el-card__body) {
                padding: 10px 10px 10px 5px;
              }

              .folder-image {
                margin-bottom: 10px;
                cursor: pointer; //鼠标移上去变小手
                .image {
                  width: 100%;
                  // height: 100%;
                  display: block;
                }
                .folderNameBox {
                  // width: 72px;
                  margin-top: -15px;
                  height: 32px;
                  line-height: 32px;
                  font-size: 1.3vh;
                  text-align: center;
                  overflow: hidden;
                }
              }
              .selectedBorder {
                border: 2px solid $vxe-table-selectedColor;
              }
            }
          }
        }
      }
    }
  }
}
</style>
